<style>
    :not(:defined) {
        display: none;
    }

    /* Force the scroll bar to appear so we see it hide when overlay opens. */
    body::-webkit-scrollbar {
        background: lightgray;
    }

    body::-webkit-scrollbar-thumb {
        background: darkgray;
    }

    #container {
        color: #000;
        font-size: 14px;
        width: 850px;
        height: 450px;
        text-align: center;
        padding: 10px;
        background: #349ACA;
        border: 1px outset #777;
        overflow-y: auto;
        scrollbar-width: none;
        /* Firefox */
    }

    #container::-webkit-scrollbar {
        /* Chrome, Edge, and Safari */
        width: 3px;
        height: 3px;
    }

    #container::-webkit-scrollbar-track {
        background: transparent;
    }

    #container::-webkit-scrollbar-thumb {
        background-color: rgb(70, 70, 70);
    }



    .changeContent {
        display: flex;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .changeContent div {
        margin: 0 2px;
        border: 1px solid green;
        padding: 10px;
        background: #fff;
        cursor: pointer;
    }

    .changeContent div.active {
        background: cyan !important;

    }

    .content {
        height: 300px;
        overflow: auto;
        padding: 10px;
    }

    .content>div {
        display: none;
    }

    .content>div>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 350px;
        height: 350px;
        padding: 3px;
        cursor: pointer;
        border-radius: 3px;
        margin: 5px;
        justify-content: space-around;
        font-size: 12px;
        color: #fff;
    }

    .content>div>div:hover {
        background-color: black;
    }

    .content>div>div.press {
        background-color: var(--icon-bg-color-hover)
    }


    .content>div>div img {
        border: none;
        width: 80%;
        height: 80%;
    }

    .content>div>div span {
        color: white
    }
   
    .content>div.active {
        /* display: flex;
        flex-wrap: wrap; */
        display: grid;
        /* 声明列的宽度,数字3表示的重复3次，即有3列宽度为200px*/
        grid-template-columns: repeat(auto-fill, 350px);
        grid-template-rows: repeat(auto-fill, 350px);
        /* 声明行间距和列间距 */
        grid-gap: 20px;
        justify-content: center;
    }

    .bottom {
        text-align: center;
        background: #349ACA;
    }

    .tool_prefs_cancel {
        display: inline-block;
        padding: 4px 15px;
        border: none;
        cursor: pointer;
    }

    #top {
        background: #349ACA;
        text-align: center;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }
</style>
<elix-dialog id="svg_createment" aria-label="Sample dialog" closed>
    <div id="top">
        <h>-------图形列表-------</h>
    </div>
    <div id="container">
        <div class="changeContent">

        </div>
        <div class="content">

        </div>

    </div>
    <div class="bottom">
        <button class="tool_prefs_cancel">
            取消
        </button>
        <button class="tool_prefs_del">
            删除
        </button>
    </div>

</elix-dialog>